<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            background-color: rgb(241, 242, 243);
        }

        .center {
            width: 1200px;
            margin: 0 auto;
        }

        .scale {
            text-decoration: none;
            color: #666;
        }

        .scale:hover {
            transform: scale(1.1);
            transition-duration: .3s;
        }

        .scale:active {
            color: orange;
        }

        h3 {
            color: white
        }
        header{
            background-color: white;
        }
        p{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; /*是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。*/
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<div id="app">
    <common-header></common-header>

    <el-main class="center">
        <el-carousel  height="375px" interval="3000">
            <el-carousel-item v-for="item in bannerArr">
                <div style="width: 100%;height: 100%;margin: 0 auto">
                    <img class="imgHover"
                         :src="item.value" alt="轮播图.png" height="100%" width="100%"
                    >
                </div>
            </el-carousel-item>
        </el-carousel>

        <!--烘焙食谱开始-->
        <!--导航菜单开始-->
        <el-row style="background-color: white;">
            <el-col span="3">
                <p style="float: left;line-height: 65px;margin: 0;font-size: 28px;font-weight: 500">
                    烘焙食谱</p>
            </el-col>
            <el-col span="21">
                <div style="height: 65px">
                    <el-menu :default-active="mnRecipeActiveIndex" class="el-menu-demo"
                             mode="horizontal"
                             @select="mnRecipeNavHandleSelect"
                             active-text-color="orange">
                        <el-menu-item index="-1">全部</el-menu-item>
                        <el-menu-item :index="item.id" v-for="(item,i) in mnRecipeCategoryArr">
                            <a class="scale">{{item.name}}</a>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
        </el-row>
        <!--导航菜单结束-->
        <!--展示卡片簿开始-->
        <el-row>
            <div >
                <el-row gutter="20px">
                        <el-col span="6" v-for="(item,i) in mnRecipeArr">
                            <el-card class="scale" style="margin: 20px 0">
                                <a :href="'detail.html?id='+item.id"
                                   style="text-decoration: none;color: #333">

                                    <img :src="item.imgUrl" alt="mvImg" width="100%" style="width:100%;height: 144px;">
                                    <div style="margin: 15px">
                                        <p style="margin: 0;height:40px" class="mn-card-title">{{item.title}}</p>
                                    </div>
                                    <div style="height: 25%;margin: 15px;overflow: hidden">
                                        <el-row gutter="20">
                                            <el-col span="4">
                                                <el-avatar size="small" :src="item.userImgUrl">
                                                </el-avatar>
                                            </el-col>
                                            <el-col span="10">
                                                {{item.nickName}}
                                            </el-col>
                                            <el-col span="10">
                                <span
                                        style="float:right;margin: 3px;
                                  font-size: 12px;line-height: 25px;color:#ccc">
                                    {{item.categoryName}}
                                </span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </a>
                            </el-card>
                        </el-col>
                    <el-empty description="暂无数据" v-else></el-empty>
                </el-row>
            </div>
        </el-row>
        <div style="margin: 30px auto">
            <el-button
                    class="more-btn"
                    plain="true"
                    style="display: block;margin: 0 auto"
                    @click="toRecipe"
            >
                <span style="font-size: 16px">点击查看更多食谱</span>
            </el-button>
        </div>
        <!--展示卡片簿结束-->

        <!--烘焙食谱结束-->

        <!--烘焙视频开始-->
        <!--导航菜单开始-->
        <el-row  style="background-color: white;">
            <el-col span="3">
                <p style="float: left;line-height: 65px;margin: 0;font-size: 28px;font-weight: 500">
                    烘焙视频</p>
            </el-col>
            <el-col span="21">
                <div style="height: 65px">
                    <el-menu :default-active="mnVideoActiveIndex" class="el-menu-demo"
                             mode="horizontal"
                             @select="mnVideoNavHandleSelect"
                             active-text-color="orange">
                        <el-menu-item index="-1">全部</el-menu-item>
                        <el-menu-item :index="item.id" v-for="(item,i) in mnVideoCategoryArr">
                            <a class="scale">{{item.name}}</a>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
        </el-row>
        <!--导航菜单结束-->
        <!--卡片展示开始-->
        <el-row>
            <div >
                <el-row gutter="20">
                    <el-col span="6" v-for="(item,i) in mnVideoArr">
                        <el-card class="scale" style="margin: 20px 0">
                            <a :href="'detail.html?id='+item.id"
                               style="text-decoration: none;color: #333">

                                <img :src="item.imgUrl" alt="mvImg" width="100%" style="width:100%;height: 144px;">
                                <div style="margin: 15px">
                                    <p style="margin: 0;height: 40px" class="mn-card-title">{{item.title}}</p>
                                </div>
                                <div style="height: 25%;margin: 15px;overflow: hidden">
                                    <el-row gutter="20">
                                        <el-col span="4">
                                            <el-avatar size="small" :src="item.userImgUrl">
                                            </el-avatar>
                                        </el-col>
                                        <el-col span="10">
                                            {{item.nickName}}
                                        </el-col>
                                        <el-col span="10">
                                <span
                                        style="float:right;margin: 3px;
                                  font-size: 12px;line-height: 25px;color:#ccc">
                                    {{item.categoryName}}
                                </span>
                                        </el-col>
                                    </el-row>
                                </div>
                            </a>
                        </el-card>
                    </el-col>
                    <el-empty description="暂无数据" v-else></el-empty>
                </el-row>
            </div>
        </el-row>
        <div style="margin: 30px auto">
            <el-button
                    class="more-btn"
                    plain="true"
                    style="display: block;margin: 0 auto"
                    @click="toVideo"
            >
                <span style="font-size: 16px">点击查看更多视频</span>
            </el-button>
        </div>
        <!--卡片展示结束-->
        <!--烘焙视频结束-->
        <!--资讯开始-->
        <!--导航菜单开始-->
        <el-row  style="background-color: white;">
            <el-col span="3">
                <p style="float: left;line-height: 65px;margin: 0;font-size: 28px;font-weight: 500">
                    行业资讯</p>
            </el-col>
            <el-col span="21">
                <div style="height: 65px">
                    <el-menu :default-active="mnInfoActiveIndex" class="el-menu-demo"
                             mode="horizontal"
                             @select="mnInfoNavHandleSelect"
                             active-text-color="orange">
                        <el-menu-item index="-1">全部</el-menu-item>
                        <el-menu-item :index="item.id" v-for="(item,i) in mnInfoCategoryArr">
                            <a class="scale">{{item.name}}</a>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
        </el-row>
        <!--导航菜单结束-->
        <!--卡片展示开始-->
        <el-row>
            <div >
                <el-row gutter="20">
                    <el-col span="6" v-for="(item,i) in mnInfoArr">
                        <el-card class="scale" style="margin: 20px 0">
                            <a :href="'detail.html?id='+item.id"
                               style="text-decoration: none;color: #333">

                                <img :src="item.imgUrl" alt="mvImg" width="100%" style="width:100%;height: 144px;">
                                <div style="margin: 15px">
                                    <p style="margin: 0;height: 40px" class="mn-card-title">{{item.title}}</p>
                                </div>
                                <div style="height: 25%;margin: 15px;overflow: hidden">
                                    <el-row gutter="20">
                                        <el-col span="4">
                                            <el-avatar size="small" :src="item.userImgUrl">
                                            </el-avatar>
                                        </el-col>
                                        <el-col span="10">
                                            {{item.nickName}}
                                        </el-col>
                                        <el-col span="10">
                                <span
                                        style="float:right;margin: 3px;
                                  font-size: 12px;line-height: 25px;color:#ccc">
                                    {{item.categoryName}}
                                </span>
                                        </el-col>
                                    </el-row>
                                </div>
                            </a>
                        </el-card>
                    </el-col>
                    <el-empty description="暂无数据" v-else></el-empty>
                </el-row>
            </div>
        </el-row>
        <div style="margin: 30px auto">
            <el-button
                    class="more-btn"
                    plain="true"
                    style="display: block;margin: 0 auto"
                    @click="toInfo"
            >
                <span style="font-size: 16px">点击查看更多资讯</span>
            </el-button>
        </div>
        <!--卡片展示结束-->
        <!--资讯结束-->

    </el-main>
    <common-footer></common-footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="js/common.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                bannerArr: [],
                mnRecipeActiveIndex: "-1",
                mnRecipeCategoryArr: [],
                mnVideoActiveIndex: "-1",
                mnVideoCategoryArr: [],
                mnInfoActiveIndex: "-1",
                mnInfoCategoryArr: [],
                mnRecipeArr:[],
                mnVideoArr:[],
                mnInfoArr:[]
            }
        },
        methods: {
            toRecipe(){
                location.href = "/contentList.html?type=1";
            },
            toVideo(){
                location.href = "/contentList.html?type=2";
            },
            toInfo(){
                location.href = "/contentList.html?type=3";
            },
            mnRecipeNavHandleSelect(key, keyPath) {
                let url = key==-1?"/api/content/getContentListByType?type=1":"/api/content/getContentListByType?type=1&categoryId="+key;
                axios.get(url).then(function (response) {
                    v.mnRecipeArr = response.data;
                })
            },
            mnVideoNavHandleSelect(key, keyPath) {
                let url = key==-1?"/api/content/getContentListByType?type=2":"/api/content/getContentListByType?type=2&categoryId="+key;
                axios.get(url).then(function (response) {
                    v.mnVideoArr = response.data;
                })
            },
            mnInfoNavHandleSelect(key, keyPath) {
                let url = key==-1?"/api/content/getContentListByType?type=3":"/api/content/getContentListByType?type=3&categoryId="+key;
                axios.get(url).then(function (response) {
                    v.mnInfoArr = response.data;
                })
            },
            selectAllCategory(){
                axios.get("/api/category/getCategoryListByType?type=1").then(function (response) {
                    v.mnRecipeCategoryArr = response.data;
                })
                axios.get("/api/category/getCategoryListByType?type=2").then(function (response) {
                    v.mnVideoCategoryArr = response.data;
                })
                axios.get("/api/category/getCategoryListByType?type=3").then(function (response) {
                    v.mnInfoCategoryArr = response.data;
                })
            },
            selectAllList(){
                axios.get("/api/content/getContentListByType?type=1").then(function (response) {
                    v.mnRecipeArr = response.data;
                })
                axios.get("/api/content/getContentListByType?type=2").then(function (response) {
                    v.mnVideoArr = response.data;
                })
                axios.get("/api/content/getContentListByType?type=3").then(function (response) {
                    v.mnInfoArr = response.data;
                })
            }
        },
        created: function () {
            //请求轮播图数据
            axios.get("/api/code/select").then(function (response) {
                v.bannerArr = response.data;
            })
            //请求所有分类数据
           this.selectAllCategory();
            //请求所有分类的列表数据
            this.selectAllList();
        }
    })
</script>
</html>